<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>calendar</title>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <link href="css/base.css" rel="stylesheet">
        </link>
        <link href="css/main.css" rel="stylesheet">
        </link>
        </head>
        <body>
            <div class="head">
            </div>
            <div class="center">
                <div class="content font">
                    <!--<div style="width:0;height:0;">&nbsp;</div>-->
                    <div class="calendarTitle">
                        <!-- 日历按钮  -->
                        <div class="calendarBtn">
                            <div class="calBtnCtn">
                            </div>
                            <div class="calBtnContent">
                                日历
                            </div>
                            <!--<img src="images/CalendarButton~ipad.png" />-->
                        </div>
                        <!-- 右边搜索框 -->
                        <div class="calendarSearch">
                            <div class="calendarSearchBtn">
                            </div>
                            <div class="calendarSearchInput">
                                <input type="text" placeholder="搜索" />
                            </div>
                        </div><!-- 中间切换按钮  -->
                        <div class="calendarMode">
                            <ul class="calendarModeList">
                                <li class="calModLeftBtn">
                                    日
                                </li>
                                <li>
                                    周
                                </li>
                                <li>
                                    月
                                </li>
                                <li class="calModRightBtn">
                                    列表
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--<img src="images/Default-Landscape~ipad.png" />--><!-- 内容开始 -->
                    <div class="calendarContent">
                        <div>
                        </div>
                        <div class="windowpannel">
                            <div class="window">
                            </div>
                            <div class="viewport">
                            </div>
                        </div>
                        <div>
                        </div>
                        <!-- 翻页效果开始 --><!--<div style="display:none;">
                        <canvas id="flipCanvas" style="position:absolute; z-index:4;">
                        </canvas>
                        <div id="pages" class="pages" style="position:absolute; z-index:1">
                        <section>
                        <div>
                        <h2>History</h2>
                        <p>
                        Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers and Opera and standardized by the WHATWG on new proposed specifications for next generation web technologies.
                        </p>
                        </div>
                        </section>
                        <section>
                        <div>
                        <h2>Usage</h2>
                        <p>
                        Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.
                        </p>
                        </div>
                        </section>
                        <section>
                        <div>
                        <h2>Reactions</h2>
                        <p>
                        At the time of its introduction the canvas element was met with mixed reactions from the web standards community. There have been arguments against Apple's decision to create a new proprietary element instead of supporting the SVG standard. There are other concerns about syntax e.g. the absence of a namespace.
                        </p>
                        </div>
                        </section>
                        <section>
                        <div>
                        <h2>Support</h2>
                        <p>
                        The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera. It is not natively implemented by Internet Explorer (IE) as of version 8, though support is in development for Internet Explorer 9; however, many of the Canvas element's features can be supported in IE, for example by using Google or Mozilla plugins, JavaScript libraries and either Adobe Flash or IE's proprietary VML.
                        </p>
                        </div>
                        </section>
                        </div>
                        </div>--><!-- 翻页效果结束 -->
                    </div>
                    <!-- 内容结束 --><!-- 日历尾 -->
                    <div class="calendarFoot">
                        <div class="centerCalendar">
                            <div class="calendarFootToday">
                                关于日历
                            </div>
                            <div class="calendarFootAdd">
                                联系作者
                            </div>
                            <div class="calendarFootDate">
                                <span class="calFootDateArrowLeft"></span>
                                <span class="calFootDateArrowRight"></span>
                                <div class="calFootDateContent">
                                    <div class="calFootDateCntPreview">
                                        <div class="headMonth">
                                            <span>一月</span>
                                        </div>
                                    </div>
                                    <div style="overflow:hidden;">
                                        <div class="calFootDateCntCurrent" currentMon="2012-2-1">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="desktop">
                            <div class="effect">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="back">
                    <div style="height:inherit;width:inherit;">
                        <div id="backcalendar" class="backCalendar" style="top:200px;">
                            weibo:<a target="_blank" href="http://weibo.com/201266650" style=" font-family:inherit; color:inherit;">关注我http://weibo.com/201266650</a>
                            <br/>
                            email:dushaobindoudou@gmail.com
                        </div>
                        <div class="backCalendar" id="aboutCalendar">
                            这个日历是其实是用来记日志的，支持transform的浏览器，firefox 10，chrome 12以上效果最好
							ie8 有兼容问题，可以修改<br/>
                        </div>
                        <div class="backCalendar" id="contactme">
                            我的博客:http://www.cnblogs.com/dushaobin
                            <br/>
                            email:dushaobindoudou@gmail.com
                            <br/>
                            qq:603167546
                        </div>
                        <div class="backCalendar" id="aboutme">
                            有事发邮件:dushaobindoudou@gmail.com
                        </div>
                        <div class="backCalendar" id="todo">
                            还有一个翻页效果没有用上，已经写好了如果有人感兴趣勒，就接着写，好像不怎么好像如果有设计漂亮的可以加上，这个就到这里了。
                            <br/>
                            下面再写就写canvas 3D的东西了
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
            </div>
            <script type="text/javascript" src="script/dispatcher.js">
            </script>
            <script type="text/javascript">
                
                var quene = [{queue:[{
                    "url": "script/dateBase.js",type:"js"
                }, {
                    "url": "script/DateSlider.js",type:"js"
                }, {
                    "url": "script/timer.js",type:"js"
                }, {
                    "url": "script/tween.js",type:"js"
                }, {
                    "url": "script/parallel.js",type:"js"
                }, {
                    "url": "script/pliper.js",type:"js"
                }],callback:function(){
				try{
                    var a = navigator.userAgent.toLowerCase();
                    var b = {
                        IE: {
                            is: /msie/.test(a),
                            ver: (/msie (\d\.\d)/.exec(a)) && (/msie (\d\.\d)/.exec(a)[1])
                        },
                        OPERA: /opera/.test(a),
                        MOZ: /gecko/.test(a) && !/(compatible|webkit)/.test(a),
                        SAFARI: !/chrome\/([\d.]*)/.test(a) && /\/([\d.]*) safari/.test(a),
                        CHROME: /chrome\/([\d.]*)/.test(a),
                        IPAD: /\(ipad/i.test(a),
                        IPHONE: /\(iphone/i.test(a),
                        ITOUCH: /\(itouch/i.test(a),
                        MOBILE: /mobile/i.test(a)
                    };
                    var ieVer = parseFloat(b.IE.ver);
                    var hasClass = function(ele, cls){
                        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
                    }
                    var addClass = function(ele, cls){
                        if (!hasClass(ele, cls)) {
                            ele.className += " " + cls;
                        }
                    }
                    var removeClass = function(ele, cls){
                        if (hasClass(ele, cls)) {
                            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                            ele.className = ele.className.replace(reg, ' ');
                        }
                    }
                    var replaceClass = function(ele, oldClass, newClass){
                        if (hasClass(ele, oldClass)) {
                            removeClass(ele, oldClass);
                            addClass(ele, newClass);
                        }
                        return;
                    }                    
                    var reset = function(){
                        var backs = document.querySelectorAll(".backCalendar"), i = 0, len = backs.length;
                        for (; i < len; i++) {
                            removeClass(backs[i], "show");
                        }
                    }
                    var currMon = document.querySelector(".calFootDateCntCurrent");
                    var headMon = document.querySelector(".calFootDateCntPreview");
                    var prev = document.querySelector("span.calFootDateArrowLeft");
                    var next = document.querySelector("span.calFootDateArrowRight");
                    var sd = new Slider(currMon, headMon, {
                        previous: prev,
                        next: next
                    });
                    if (b.IE.is) {
                        if (ieVer < 8) {
                            alert("不好意思你的浏览器可能会出问题！请用更高版本的浏览器！");
                            return;
                        }
                        else 
                            if (ieVer >= 8) {								
                                var back = document.querySelector(".back");
                                back.style.display = "none";
                                document.querySelector(".calendarBtn").onclick = function(){
                                    document.querySelector(".center").children[0].style.display = "none";
                                    addClass(document.getElementById("backcalendar"), "show");
                                    document.querySelector(".back").style.display = "block";
                                };
                                document.querySelector(".back").onclick = function(){
                                    reset();
                                    document.querySelector(".center").children[0].style.display = "block";
                                    document.querySelector(".back").style.display = "none";
                                    
                                };
                                document.querySelector(".calendarFootToday").onclick = function(){
                                    addClass(document.getElementById("aboutCalendar"), "show");
                                    
                                    document.querySelector(".center").children[0].style.display = "none";
                                    document.querySelector(".back").style.display = "block";
                                };
                                document.querySelector(".calendarFootAdd").onclick = function(){
                                    addClass(document.getElementById("contactme"), "show");
                                    
                                    document.querySelector(".center").children[0].style.display = "none";
                                    document.querySelector(".back").style.display = "block";
                                };
                                document.querySelector(".calendarModeList").onclick = function(){
                                    addClass(document.getElementById("todo"), "show");
                                    
                                    document.querySelector(".center").children[0].style.display = "none";
                                    document.querySelector(".back").style.display = "block";
                                };
								return;
                            }
                       
                    }
                    else {
                        document.querySelector(".calendarBtn").onclick = function(){
                            addClass(document.querySelector(".center"), "flip");
                            addClass(document.getElementById("backcalendar"), "show");
                        };
                        document.querySelector(".back").onclick = function(){
                            reset();
                            removeClass(document.querySelector(".center"), "flip");
                        };
                        document.querySelector(".calendarFootToday").onclick = function(){
                            addClass(document.getElementById("aboutCalendar"), "show");
                            addClass(document.querySelector(".center"), "flip");
                        };
                        document.querySelector(".calendarFootAdd").onclick = function(){
                            addClass(document.getElementById("contactme"), "show");
                            addClass(document.querySelector(".center"), "flip");
                        };
                        document.querySelector(".calendarModeList").onclick = function(){
                            addClass(document.getElementById("todo"), "show");
                            addClass(document.querySelector(".center"), "flip");
                        };
                    }
                    
                }catch(e){}}
				},{queue:[{
                    "url": "script/dateBase.js",type:"js"
                }, {
                    "url": "script/DateSlider.js",type:"js"
                }, {
                    "url": "script/timer.js",type:"js"
                }, {
                    "url": "script/tween44.js",type:"js"
                }, {
                    "url": "script/paralle_sdfl.js",type:"js"
                }, {
                    "url": "script/pliper.js",type:"js"
                }],callback:function(){
					console.log("i am loaded!");
				}
				}];
                vRequire && vRequire(quene,function(){});
				window.onerror=function(){
					console.log(arguments);
				}
            </script>
        </body>
    </html>
